<<template>
  <div style="margin: 10px;">
    <el-row :gutter="10">
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">照明设备统计</div>
                <div style="text-align: center;">回路总数 &nbsp150</div>
                <div>
                    <el-row :gutter="10">
                        <el-col :span="6" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/quankai1.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">全开</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">120</div>
                        </el-col>
                        <el-col :span="6" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/bankai.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">半开</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">10</div>
                        </el-col>
                        <el-col :span="6" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/quanguan.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">全关</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">20</div>
                        </el-col>
                        <el-col :span="6" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/guzhang.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">故障</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">20</div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">本月回路故障处理率</div>
                <div style="text-align: center;">工单总数 &nbsp100</div>
                <div class="echartsbox" ref="echarts">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">
                    故障告警记录
                </div>
                <div class="cesuo-list">
                    <el-table
                    :data="tableData"
                    height="260"
                    style="width: 100%;font-size: 10px"
                    >
                    <el-table-column
                        prop="alerttype"
                        label="告警类型"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="alarmfacility"
                        label="告警设备"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="deviceLocation"
                        label="告警位置"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="warningtime"
                        label="告警时间"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="processingStatus"
                        label="处理状态"
                        align="center">
                    </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="12">
            <el-card style="height: 350px;">
                <el-row>
                    <el-col :span="6">
                        <div class="title">
                            照明时长统计
                        </div>
                    </el-col>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select v-model="value1" style="width: 100px;"  size="mini" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select
                                size="mini"
                                v-model="value2"
                                style="width: 100px;"
                                collapse-tags
                                placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select
                                size="mini"
                                v-model="value2"
                                style="width: 100px;"
                                collapse-tags
                                placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                </el-row>
                <div class="echartsbox2" ref="echarts2">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card style="height: 350px;">
                <el-row>
                    <el-col :span="6">
                        <div class="title">
                            照明电耗趋势
                        </div>
                    </el-col>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select v-model="value1" style="width: 100px;"  size="mini" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select
                                size="mini"
                                v-model="value2"
                                style="width: 100px;"
                                collapse-tags
                                placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select
                                size="mini"
                                v-model="value2"
                                style="width: 100px;"
                                collapse-tags
                                placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                </el-row>
                <div class="echartsbox2" ref="echarts3">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        tableData:[{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'故障告警',
            alarmfacility:'照明回路1',
            deviceLocation:'1栋1层203',
            warningtime:'08:30',
            processingStatus:'09:30'
        },]
    }
  },
  created () {
  },
  mounted () {
    this.benyeuhuiluEcharts()
    this.zhaomingshichangEcharts()
    this.zhaomingdianhaoEcharts()
  },
  methods: {
    // 本月回路故障处理率Echarts
    benyeuhuiluEcharts(){
        var echarts=this.$refs.echarts;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts);
		  }
		  
		  var option;

          option = {
                title: {
                    // text: 'Referer of a Website',
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:[]
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    center:['50%','50%'],//调整饼图的位置
                    radius:['30%','50%'],
                    emphasis: {
                        label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                        },
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [
                        { value: 40, name: '已处理' },
                        { value: 60, name: '未处理' },
                    ],
                    label:{
                        formatter:function(data){
                            return `${data.name} ${data.value}`
                        }
                        },
                    }
                ]
            };

          option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    },
    // 照明时长统计Echarts
    zhaomingshichangEcharts(){
        var echarts2=this.$refs.echarts2;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts2
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts2);
		  }
		  
		  var option;

          option = {
                // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title: {
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    top:'6%',
                    left: '4%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    boundaryGap: false,
                    data: ['回路1', '回路2', '回路3', '回路4', '回路5', '回路6', '回路7','回路8', '回路9', '回路10', '回路11', '回路12']
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: 'Line 5',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#66ccff'
                        },
                        {
                            offset: 1,
                            color: '#ccffff'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 302, 181, 234, 210, 290, 150,220, 302, 181, 234, 210, 290, 150]
                    }
                ]
            };

          option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    },
    // 照明电耗趋势Echarts
    zhaomingdianhaoEcharts(){
        var echarts3=this.$refs.echarts3;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts3
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts3);
		  }
		  
		  var option;

          option = {
                // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title: {
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    top:'6%',
                    left: '4%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    boundaryGap: false,
                    data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: 'Line 5',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#ffcc00'
                        },
                        {
                            offset: 1,
                            color: '#ffffcc'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 302, 181, 234, 210, 290, 150,220, 302, 181, 234, 210, 290, 150]
                    }
                ]
            };

          option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    }
  },
}
</script>
<style lang="scss" scoped>
.echartsbox{
    width: 100%;
    height: 260px;
}
.echartsbox2{
    width: 100%;
    height: 300px;
}
.title{
	padding: 10px;
	font-weight: bold;
}
.ph-text{
    font-size: 12px;
}
.shebeiTop{
    margin-top: 20px;
}
.topRigth{
    float: right;
    padding: 10px;
}
</style>
